<template>
    <div class="flex gap-16px">
        <div class="flex-1">
            <insureData title="运营数据" :list="Object.values(list)" v-model:date-value="dateList" :company-id="companyId" @change="getInsureData" />
        </div>
        <div class="flex-1 h-300">
            <signTrendData :company-id="companyId"/>
        </div>
    </div>
    <div class="mg-t-16 bg-white charge-box">
        <div class="fs-14 bold pd-t-16 pd-l-16">充值记录</div>
        <rechargeRecord :company-id="companyId"/>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import insureData from '../insureData.vue'
import signTrendData from '../signTrendData.vue'
import rechargeRecord from './rechargeRecord.vue'

import { getEleSignOperateData } from '@/api/clients/signClient.ts'

const props = defineProps({
    companyId: {
        type: [String, Number]
    }
})

const dateList = ref([])

const list = ref({
    notSign: {
        name: '待签署份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar1'
    },
    sign: {
        name: '已签署份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar2'
    },
    signingFailed: {
        name: '签署失败份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar3'
    },
    surplus: {
        name: '剩余份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar4'
    },
})

const getInsureData = () => {
    if (!props.companyId) return
    getEleSignOperateData({
        companyId: props.companyId,
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : ''
    }).then(res => {
        for (const key in list.value) {
            list.value[key].value = res[key]
        }
    })
}

watch(() => props.companyId, (newval) => {
    if (newval) {
        getInsureData()
    }
}, {
    immediate: true
})
</script>
<style lang="scss" scoped>
.h-300 {
    height: 280px;
}

.charge-box {
    border-radius: 4px;
}
</style>